<template>
	<view class="container">
		<view class="header flex status-bar-height">
			<view class="flex flex-align-items" @click="back">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
				<text class="font-28-M">返回</text>
			</view>
		</view>

		<view class="title font-54-M">{{title[form.type]}}</view>

		<view class="form">
			<view class="form-item">
				<view class="form-label font-28-M">手机号</view>
				<view class="form-value">
					<input v-model="form.mobile" type="tel" placeholder="请输入手机号" maxlength="11" class="font-32-M">
				</view>
			</view>
			<view class="form-item">
				<view class="form-label font-28-M">验证码</view>
				<view class="form-value">
					<input v-model="form.code" type="text" placeholder="请输入验证码" maxlength="6" class="font-32-M">
					<text class="send-btn font-32-M bg-main" @click="sendCode">{{codeBtnTxt}}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label font-28-M">密码</view>
				<view class="form-value">
					<input v-if="pwdShow" v-model="form.newpassword" type="text" placeholder="请输入密码" maxlength="20"
						class="font-32-M">
					<input v-else v-model="form.newpassword" type="password" placeholder="请输入密码" maxlength="20"
						class="font-32-M">
					<uni-icons type="eye" size="24" color="#333" class="uni-icons" @click="pwdShowChange"></uni-icons>
				</view>
			</view>
		</view>

		<view class="form-btn bg-main font-28-M" @click="submit">{{form.type === 'logOff' ? '确认注销' : '立即提交'}}</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import api from '@/api/index.js';
	import verifyRules from '@/js/verifyRules.js';

	const title = {
		2: '修改密码',
		1: '忘记密码'
	}
	const form = ref({
		type: null,
		mobile: '',
		newpassword: '',
		code: '',
		terminal: 'weapp'
	});
	const pwdShow = ref(false);
	const codeBtnTxt = ref('获取');
	const rules = {
		mobile: [{
			require: true,
			msg: '请输入手机号'
		}, {
			validator: value => {
				// 上面有说，返回true表示校验通过，返回false表示不通过
				return !uni.$u.test.mobile(value);
			},
			msg: '手机号码不正确'
		}],
		code: [{
			require: true,
			msg: '请输入验证码'
		}],
		newpassword: [{
			require: true,
			msg: '请输入新密码'
		}, {
			min: 6,
			msg: '密码位数在6-16位'
		}]
	};
	const interval = ref(null);
	
	// 返回上一页
	const back = () => {
		uni.navigateBack();
	}
	// 显示或隐藏密码
	const pwdShowChange = () => {
		pwdShow.value = !pwdShow.value;
	}
	// 倒计时
	const countdown = () => {
		if (interval.value) {
			clearTimeout(interval.value);
		}
		if (codeBtnTxt.value === '获取' || codeBtnTxt.value > 1) {
			interval.value = setTimeout(() => {
				if (codeBtnTxt.value === '获取') {
					codeBtnTxt.value = 29;
				} else if (codeBtnTxt.value > 1) {
					codeBtnTxt.value -= 1;
				}
				countdown();
			}, 1000);
		} else {
			setTimeout(() => {
				codeBtnTxt.value = '获取'
			}, 1000);
		}
	}
	// 发送验证码
	const sendCode = () => {
		if (codeBtnTxt.value !== '获取') {
			return
		}

		if (!uni.$u.test.mobile(form.value.mobile)) {
			uni.showToast({
				title: '手机号码不正确',
				icon: 'none'
			});
			return
		}

		api.base.send({
			mobile: form.value.mobile,
			event: form.value.type == 1 ? 'resetpwd' : 'changepwd'
		}).then(() => {
			countdown();
		});
	}
	// 提交信息
	const submit = () => {
		if (!verifyRules(rules.value, form.value)) {
			return
		}
		api.base.resetpwd(form.value).then(() => {
			uni.navigateBack();
		});
	}

	onLoad((options) => {
		form.value.type = options.type;
		// #ifdef MP-WEIXIN
		form.value.terminal = 'weapp';
		// #endif
		// #ifdef APP-PLUS
		const systemInfo = uni.getSystemInfoSync();
		if (systemInfo.system.search('IOS') > -1) {
			form.value.terminal = 'ios';
		} else {
			form.value.terminal = 'android';
		}
		// #endif
	});
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.container {
		padding: 300rpx 56rpx 216rpx;
	}

	.header {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		padding-left: 32rpx;
		background: #fff;

		view {
			height: 44px;

			text:nth-child(2) {
				color: #333;
				margin-left: 16rpx;
			}
		}
	}

	.title {
		color: #333;
		margin-bottom: 80rpx;
	}

	.form {
		.form-item {
			margin-bottom: 44rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.form-label {
				color: #666;
				margin-bottom: 16rpx;
			}

			.form-value {
				position: relative;

				input {
					width: 100%;
					height: 92rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					padding-left: 32rpx;
				}

				.uni-icons {
					position: absolute;
					right: 32rpx;
					top: 24rpx;
					z-index: 10;
				}

				.send-btn {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 10;
					height: 92rpx;
					width: 112rpx;
					text-align: center;
					line-height: 92rpx;
					color: #fff;
					border-radius: 0 16rpx 16rpx 0;
				}
			}
		}
	}

	.form-btn {
		height: 104rpx;
		border-radius: 60rpx;
		box-shadow: 0px 12rpx 30rpx 0px rgba(72, 106, 239, 0.24);
		text-align: center;
		line-height: 104rpx;
		color: #fff;
		margin-top: 240rpx;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>